{% load static %}
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>管理系统</title>
    <link rel="stylesheet" href="{% static "bootstrap-5.3.0-alpha1-dist/css/bootstrap.min.css" %}">
    <link rel="stylesheet" href="{% static "MDB5-STANDARD-UI-KIT-Free-6.2.0/css/mdb.min.css" %}">

    <link rel="stylesheet" href="{% static "bootstrap-icons-1.10.4/font/bootstrap-icons.css" %}">
    <link rel="stylesheet" href="{% static "fontawesome-free-6.4.0-web/css/fontawesome.min.css" %}">
    <link rel="stylesheet" href="{% static "fontawesome-free-6.4.0-web/css/brands.min.css" %}">
    <link rel="stylesheet" href="{% static "fontawesome-free-6.4.0-web/css/solid.min.css" %}">

    {% block css %}{% endblock %}

</head>

<body class="d-flex flex-column vh-100">

<nav class="navbar navbar-expand-lg bg-body-tertiary">
    <div class="container-fluid">
        <a class="navbar-brand" href="#">管理系统</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
                aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                <li class="nav-item">
                    <a class="nav-link active" aria-current="page" href="/">首页</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" aria-current="page" href="/user/list">用户管理</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/depart/list">部门管理</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/numbers/list">号码管理</a>
                </li>

                <li class="nav-item">
                    <a class="nav-link" href="/task/list">任务管理</a>
                </li>

                <li class="nav-item">
                    <a class="nav-link" href="/order/list">订单管理</a>
                </li>
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown"
                       aria-expanded="false">
                        {% if request.session.info.name %}
                            {{ request.session.info.name }}
                        {% else %}
                            请登录
                        {% endif %}
                    </a>
                    <ul class="dropdown-menu">
                        {% if not request.session.info.name %}
                            <li><a class="dropdown-item" href="/login/">登录</a></li>
                        {% else %}
                            <li><a class="dropdown-item" href="/logout/">注销</a></li>
                        {% endif %}
                        <li>
                            <hr class="dropdown-divider">
                        </li>
                        <li><a class="dropdown-item" href="/myadmin/list">管理员账户</a></li>
                    </ul>
                </li>
            </ul>
            <ul class="navbar-nav navbar-right">
                <li class="nav-item">
                    <a class="nav-link disabled">敬请期待</a>
                </li>
            </ul>
            {#      <form class="d-flex" role="search">#}
            {#          <input class="form-control me-2" type="search" placeholder="搜索" aria-label="Search">#}
            {#          <button class="btn btn-outline-success " type="submit" style="width: 100px;"><strong>搜索</strong></button>#}
            {#      </form>#}
        </div>
    </div>
</nav>

{#中间的内容#}
<!-- 主体内容容器 -->
<div class="flex-grow-1 d-flex">
    <div class="container-fluid h-100">
        {% block content %}{% endblock %}
    </div>
</div>

<!-- Footer -->
<!--<footer class="text-center text-lg-start bg-light text-muted">-->
<!--  &lt;!&ndash; Section: Social media &ndash;&gt;-->
<!--  <section class="d-flex justify-content-center justify-content-lg-between p-4 border-bottom">-->
<!--    &lt;!&ndash; Left &ndash;&gt;-->
<!--    <div class="me-5 d-none d-lg-block">-->
<!--      <span>Get connected with us on social networks:</span>-->
<!--    </div>-->
<!--    &lt;!&ndash; Left &ndash;&gt;-->

<!--    &lt;!&ndash; Right &ndash;&gt;-->
<!--    <div>-->
<!--      <a href="" class="me-4 text-reset">-->
<!--        <i class="fab fa-facebook-f"></i>-->
<!--      </a>-->
<!--      <a href="" class="me-4 text-reset">-->
<!--        <i class="fab fa-twitter"></i>-->
<!--      </a>-->
<!--      <a href="" class="me-4 text-reset">-->
<!--        <i class="fab fa-google"></i>-->
<!--      </a>-->
<!--      <a href="" class="me-4 text-reset">-->
<!--        <i class="fab fa-instagram"></i>-->
<!--      </a>-->
<!--      <a href="" class="me-4 text-reset">-->
<!--        <i class="fab fa-linkedin"></i>-->
<!--      </a>-->
<!--      <a href="" class="me-4 text-reset">-->
<!--        <i class="fa-brands fa-github"></i>-->
<!--      </a>-->
<!--    </div>-->
<!--    &lt;!&ndash; Right &ndash;&gt;-->
<!--  </section>-->
<!--  &lt;!&ndash; Section: Social media &ndash;&gt;-->

<!--  &lt;!&ndash; Section: Links  &ndash;&gt;-->
<!--  <section class="">-->
<!--    <div class="container text-center text-md-start mt-5">-->
<!--      &lt;!&ndash; Grid row &ndash;&gt;-->
<!--      <div class="row mt-3">-->
<!--        &lt;!&ndash; Grid column &ndash;&gt;-->
<!--        <div class="col-md-3 col-lg-4 col-xl-3 mx-auto mb-4">-->
<!--          &lt;!&ndash; Content &ndash;&gt;-->
<!--          <h6 class="text-uppercase fw-bold mb-4">-->
<!--            <i class="fas fa-gem me-3"></i>Company name-->
<!--          </h6>-->
<!--          <p>-->
<!--            Here you can use rows and columns to organize your footer content. Lorem ipsum-->
<!--            dolor sit amet, consectetur adipisicing elit.-->
<!--          </p>-->
<!--        </div>-->
<!--        &lt;!&ndash; Grid column &ndash;&gt;-->

<!--        &lt;!&ndash; Grid column &ndash;&gt;-->
<!--        <div class="col-md-2 col-lg-2 col-xl-2 mx-auto mb-4">-->
<!--          &lt;!&ndash; Links &ndash;&gt;-->
<!--          <h6 class="text-uppercase fw-bold mb-4">-->
<!--            Products-->
<!--          </h6>-->
<!--          <p>-->
<!--            <a href="#" class="text-reset">Angular</a>-->
<!--          </p>-->
<!--          <p>-->
<!--            <a href="#" class="text-reset">React</a>-->
<!--          </p>-->
<!--          <p>-->
<!--            <a href="#" class="text-reset">Vue</a>-->
<!--          </p>-->
<!--          <p>-->
<!--            <a href="#" class="text-reset">Laravel</a>-->
<!--          </p>-->
<!--        </div>-->
<!--        &lt;!&ndash; Grid column &ndash;&gt;-->

<!--        &lt;!&ndash; Grid column &ndash;&gt;-->
<!--        <div class="col-md-3 col-lg-2 col-xl-2 mx-auto mb-4">-->
<!--          &lt;!&ndash; Links &ndash;&gt;-->
<!--          <h6 class="text-uppercase fw-bold mb-4">-->
<!--            Useful links-->
<!--          </h6>-->
<!--          <p>-->
<!--            <a href="#" class="text-reset">Pricing</a>-->
<!--          </p>-->
<!--          <p>-->
<!--            <a href="#" class="text-reset">Settings</a>-->
<!--          </p>-->
<!--          <p>-->
<!--            <a href="#" class="text-reset">Orders</a>-->
<!--          </p>-->
<!--          <p>-->
<!--            <a href="#" class="text-reset">Help</a>-->
<!--          </p>-->
<!--        </div>-->
<!--        &lt;!&ndash; Grid column &ndash;&gt;-->

<!--        &lt;!&ndash; Grid column &ndash;&gt;-->
<!--        <div class="col-md-4 col-lg-3 col-xl-3 mx-auto mb-md-0 mb-4">-->
<!--          &lt;!&ndash; Links &ndash;&gt;-->
<!--          <h6 class="text-uppercase fw-bold mb-4">Contact</h6>-->
<!--          <p><i class="fas fa-home me-3"></i> New York, NY 10012, US</p>-->
<!--          <p>-->
<!--            <i class="fas fa-envelope me-3"></i>-->
<!--            info@example.com-->
<!--          </p>-->
<!--          <p><i class="fas fa-phone me-3"></i> + 01 234 567 88</p>-->
<!--          <p><i class="fas fa-print me-3"></i> + 01 234 567 89</p>-->
<!--        </div>-->
<!--        &lt;!&ndash; Grid column &ndash;&gt;-->
<!--      </div>-->
<!--      &lt;!&ndash; Grid row &ndash;&gt;-->
<!--    </div>-->
<!--  </section>-->
<!--  &lt;!&ndash; Section: Links  &ndash;&gt;-->

<!--  &lt;!&ndash; Copyright &ndash;&gt;-->
<!--  <div class="text-center p-4" style="background-color: rgba(0, 0, 0, 0.05);">-->
<!--    © 2021 Copyright:-->
<!--    <a class="text-reset fw-bold" href="https://mdbootstrap.com/">MDBootstrap.com</a>-->
<!--  </div>-->
<!--  &lt;!&ndash; Copyright &ndash;&gt;-->
<!--</footer>-->
<!--&lt;!&ndash; Footer &ndash;&gt;-->

{#两个js导入顺序不能错#}
<script src="{% static "bootstrap-5.3.0-alpha1-dist/js/bootstrap.min.js" %}"></script>
<script src="{% static "jquery-3.6.4.min.js" %} "></script>
<script src="{% static "bootstrap-5.3.0-alpha1-dist/js/bootstrap.bundle.js" %}"></script>

<script src="{% static "MDB5-STANDARD-UI-KIT-Free-6.2.0/js/mdb.min.js" %}"></script>

{% block js %}{% endblock %}
</body>
</html>